<template>
    <div class="new-box">
      <el-tabs v-model="activeName" >
        <el-tab-pane label="前端技术" name="first" @click="handleClick">

            <ul class="news">
              <li v-for="(item, index) in list" :key="index">
                <el-row :gutter="20">
                  <el-col :span="8"><div><el-image :src="item.imgSrc" fit="fit" ></el-image></div></el-col>
                  <el-col :span="16">
                    <dl class="dec-list">
                      <dt>{{item.title}}</dt>
                      <dd>
                        <el-row :gutter="20">
                          <el-col :span="6"><el-tag><i class="el-icon-s-promotion"></i><span>{{item.type}}</span></el-tag></el-col>
                          <el-col :span="6"><i class="el-icon-collection-tag"></i><span class="cor">{{item.tagName}}</span></el-col>
                          <el-col :span="6"><i class="el-icon-date"></i><span class="cor">{{item.time}}</span></el-col>
                          <el-col :span="6"><i class="el-icon-chat-dot-square"></i><span class="cor">{{item.message}}</span></el-col>
                        </el-row>
                      </dd>
                      <dd>{{item.dec}}</dd>
                    </dl>
                  </el-col>
                </el-row>
                <el-row><el-divider></el-divider></el-row>
              </li>
            </ul>

        </el-tab-pane>
        <el-tab-pane label="互联网+" name="second">

          <ul class="news">
            <li v-for="(item, index) in list" :key="index">
              <el-row :gutter="20">
                <el-col :span="8"><div><el-image :src="item.imgSrc" fit="fit" ></el-image></div></el-col>
                <el-col :span="16">
                  <dl class="dec-list">
                    <dt>{{item.title}}</dt>
                    <dd>
                      <el-row :gutter="20">
                        <el-col :span="6"><el-tag><i class="el-icon-s-promotion"></i><span>{{item.type}}</span></el-tag></el-col>
                        <el-col :span="6"><i class="el-icon-collection-tag"></i><span class="cor">{{item.tagName}}</span></el-col>
                        <el-col :span="6"><i class="el-icon-date"></i><span class="cor">{{item.time}}</span></el-col>
                        <el-col :span="6"><i class="el-icon-chat-dot-square"></i><span class="cor">{{item.message}}</span></el-col>
                      </el-row>
                    </dd>
                    <dd>{{item.dec}}</dd>
                  </dl>
                </el-col>
              </el-row>
              <el-row><el-divider></el-divider></el-row>
            </li>
          </ul>

        </el-tab-pane>
        <el-tab-pane label="博语" name="third">

          <ul class="news">
            <li v-for="(item, index) in list" :key="index">
              <el-row :gutter="20">
                <el-col :span="8"><div><el-image :src="item.imgSrc" fit="fit" ></el-image></div></el-col>
                <el-col :span="16">
                  <dl class="dec-list">
                    <dt>{{item.title}}</dt>
                    <!-- <slot name="b"></slot> -->
                    <dd>
                      <el-row :gutter="20">
                        <el-col :span="6"><el-tag><i class="el-icon-s-promotion"></i><span>{{item.type}}</span></el-tag></el-col>
                        <el-col :span="6"><i class="el-icon-collection-tag"></i><span class="cor">{{item.tagName}}</span></el-col>
                        <el-col :span="6"><i class="el-icon-date"></i><span class="cor">{{item.time}}</span></el-col>
                        <el-col :span="6"><i class="el-icon-chat-dot-square"></i><span class="cor">{{item.message}}</span></el-col>
                      </el-row>
                    </dd>
                    <dd>{{item.dec}}</dd>
                  </dl>
                </el-col>
              </el-row>
              <el-row><el-divider></el-divider></el-row>
            </li>
          </ul>

        </el-tab-pane>
      </el-tabs>

    </div>
</template>

<script>
    export default {
        name: "new-box",
        data(){
          return {
            activeName: 'first'
          }
        },
        props:{
          list:Array
        },
        computed: {
          noMore () {
            return this.list.length >= 20
          },
          disabled () {
            return this.loading || this.noMore
          }
        },
        methods:{
          handleClick(tab, event) {
              console.log(tab, event);
          },
        }
    }
</script>

<style lang="less" scoped>
    .new-box {
        .news {
          padding-bottom: 102px;
        }

        .dec-list {
          width: 100%;
          display: flex;
          flex-direction: column;
          height: 182px;
          overflow: hidden;
          dt,dd {
            width: 100%;
            line-height: 35px;
          }
          dt {
            font-size: 20px;
            font-weight: bold;
          }
          dd {
            &:last-child {
              line-height: 30px;
            }
            &:nth-child(2) {
              span {
                margin-left: 10px;
                &.cor {
                  color: #ccc;
                }
              }
            }
          }
        }

    }
</style>
